<template>
    <div class="login" @keyup.enter="keyLogin()">

        <div class="loginBox" style="width:300px;">
        <Card :bordered="true">
            <p slot="title">
                <Icon type="log-in"></Icon>
                欢迎登陆
            </p>
            <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                <FormItem prop="username">
                    <Input class="inps" type="text" v-model="formInline.username" placeholder="用户名">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input class="inps" type="password"  v-model="formInline.password" placeholder="密码">
                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Button class="inps" type="primary" @click="handleSubmit('formInline')">登陆</Button>
                </FormItem>       
                <p class="statement">中岩物联技术支持</p>
            </Form>
        </Card>
    </div>
    </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      formInline: {
        username: "",
        password: "",
        roles: []
      },
      ruleInline: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    keyLogin() {
      this.handleSubmit();
    },
    handleSubmit() {
      var _this = this;
      this.$ajax
        .post("http://192.168.0.100:8083/LoginController/login", this.formInline)
        .then(function(res) {
          if (res.data.code == 200) {
            Cookies.set("userMessage", res.data.dataList, { expires: 1 });
            _this.$store.commit("setCookieInfo");
            _this.$router.replace({
              path: "/home"
            });
            _this.$Message.success(res.data.message);
          } else {
            _this.$Message.error(res.data.message);
          }
        })
        .catch(function(err) {
          // console.log(err);
          err.data ? _this.$Message.error(err.data.message) : "";
        });
    }
  }
};
</script>
<style scoped>
.login {
  width: 100%;
  height: 100vh;
  background: url(../../static/img/loginbg.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.loginBox {
  position: absolute;
  top: 30%;
  right: 150px;
}
.inps {
  width: 260px;
}
.statement {
  text-align: center;
  color: #c3c3c3;
  font-size: 13px;
}
</style>

